<template>
    <div>
        <mt-header title="查询房间">
            <router-link to="/" slot="left">
                <i class="mintui mintui-back lic-d"></i>
            </router-link>
        </mt-header>
        <!-- 搜索框 -->
        <div class="search">
            <input type="text" placeholder="请输入查询房间ID" v-model="roomId">
            <span class="mint-toast-icon mintui mintui-search dwicon" @touchend='getroomId'></span>
        </div>
        <div class="daili" @touchend='getuserRooms(1)'>查询所有</div>
        <div class="list" v-for="(item,index) in userRoomsData" :key="index">
            <div class="list-j">
                <div class="list-K">
                    <span>游戏名称：</span>
                    <span v-if="item.gameType == 1">麻将</span>
                    <span v-if="item.gameType == 2">打拱</span>
                    <span v-if="item.gameType == 3">牛牛</span>
                    <span v-if="item.gameType == 4">扎金花</span>
                    <div class="list-f"><span class="sp">房间：</span> <span>{{item.roomId}}</span></div>
                </div>
                <div class="lib">
                    <span> 玩家：</span>
                    <span v-for="(itemi,i) in item.userId" :key="i">{{itemi}}</span>
                </div>
            </div>
        </div>
        <div class="one">
            <div @touchend='pagingreduce' class="shang">上一页</div>
            <div @touchend='pagingplus' class="xia">下一页</div>
        </div>
    </div>
</template>

<script>
    import {
        userRooms,
        roomId
    } from '../api/api'
    import {
        Toast
    } from 'mint-ui';
    export default {
        data() {
            return {
                userRoomsData: [],
                page: '1',
                length: '',
                roomId: ''
            }
        },
        created() {
            this.getuserRooms(this.page)
        },
        methods: {
            getuserRooms(page) { //查询所有房间
                userRooms(page).then(res => {
                    if (res.data.code == 1) {
                        this.userRoomsData = res.data.data.rooms;
                        this.length = res.data.data.totalPage;
                        console.log(res.data.data)
                       
                    }
                })
            },
            pagingplus() {
                if (this.page < this.length) {
                    this.page++;
                    this.getuserRooms(this.page)
                } else {
                    Toast('已经是最后一页了');
                }
            },
            pagingreduce() {
                if (this.page > 1) {
                    this.page--;
                    this.getuserRooms(this.page)
                    //   console.log(this.pape)
                } else {
                    Toast('已经是第一页了');
                }
            },
            getroomId() {
                // console.log(1111)
                roomId(this.roomId).then(res => {
                    if (res.data.code == 1) {
                        let newData = [];
                        newData.push(res.data.data)
                        this.userRoomsData =newData;
                        console.log(res.data)
                    }else{
                         Toast('没有该房间ID');
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    a {
        text-decoration: none;
    }
    .lic-d {
        font-size: 50px;
    }
    .mint-header {
        background: -webkit-linear-gradient(left, #6180F4, #79CBFA);
        font-size: 36px;
        height: 80px;
    }
    .search {
        width: 100%;
        height: 90px;
        box-sizing: border-box;
        padding: 12px 54px;
        position: relative;
        input {
            width: 100%;
            height: 100%;
            padding-left: 20px;
            background-color: #F4F4F4;
            border: none;
            border-radius: 10px;
            outline: none;
            border-bottom: 2px solid #cccccc;
            border-top: 2px solid #cccccc;
            border-left: 2px solid #cccccc;
        }
        .dwicon {
            position: absolute;
            top: 14px;
            right: 56px;
            height: 60px;
            line-height: 70px;
            width: 100px;
            color: #fff;
            font-size: 40px;
            color: #000;
            border-radius: 10px;
            border-left: 2px solid #cccccc;
            border-right: 2px solid #cccccc;
        }
    }
    .list {
        height: 108px;
        margin-top: 20px;
        font-size: 28px;
        border: 2px solid #cccccc;
        color: #949494;
        margin: 20px 20px 0;
        border-radius: 10px;
        background-color: #fff;
        .list-j {
            padding: 4px 40px;
            font-size: 30px;
            .list-K {
                margin-bottom: 10px;
                .sp {
                    display: inline-block;
                    margin-left: 24px;
                }
                .list-f {
                    float: right;
                }
            }
        }
    }
    .daili {
        width: 400px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border-radius: 10px;
        margin: 20px auto;
        font-size: 32px;
        border: 2px solid #cccccc;
        background-color: #DEE0E0;
        box-shadow: 0px 2px 4px rgba(34, 25, 25, 0.2);
        color: #000;
    }
    .one {
        height: 60px;
        margin: 10px 10px 0;
        text-align: center;
        line-height: 60px;
        font-size: 28px;
        margin-top: 10px;
        margin-bottom: 0;
    }
    .shang {
        width: 350px;
        float: left;
        border: 2px solid #cccccc;
        border-radius: 25px;
        background-color: #DEE0E0;
    }
    .xia {
        width: 350px;
        float: right;
        border-radius: 25px;
        border: 2px solid #cccccc;
        background-color: #DEE0E0;
    }
    input::-webkit-input-placeholder {
        font-size: 28px;
        padding-left: 10px;
        color: #ccc;
    }
</style>

